<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

// 生命周期钩子
onMounted(() => {
  console.log('登陆成功')
})

function loginout() {
  setTimeout(() => {
    console.log('退出登陆成功！')
    router.push('/login')
  }, 0)
}

function toOpt() {
  router.push({
    path: '/home/opt',
  })
}

function toCom() {
  router.push({
    path: '/home/com',
  })
}

</script>
  
<template>
  <h3>我是主页</h3>
  <hr />
  <div>
    <button type="button" @click="toOpt">OptionApi</button>&nbsp;
    <button type="button" @click="toCom">CompositionApi</button>
    <!-- <RouterLink to="/home/opt">OptionApi</RouterLink><br/>
    <RouterLink to="/home/com">CompositionApi</RouterLink> -->

    <!-- 无效 -->
    <!-- <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <br /> -->
    
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
  </div>
  <hr />
  <div>
    <button type="button" @click="loginout">退出登陆</button>
  </div>
</template>
  
<style scoped>
</style>
    